body{
    margin: 0;
    padding: 0;
}
.container{
    background-color: #3d5cff;
    padding: 10px;
}
.item{
    box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    background-color: #fff;
    color: #cccccc;
    padding: 30px;
    display: block;
    text-align: center;
}
.item span{
    font-size: 50px;
}
.container{
    display: flex;
    /*height: 500px;*/
    /*flex-wrap: wrap;*/
/*主轴*/
    /*justify-content: flex-start;(默认值-左对齐)*/
    /*justify-content: flex-end;(右对齐)*/
    /*justify-content: center;（居中）*/
    /*justify-content: space-between;（两端对齐，项目之间的间隔都相等。）*/
    /*justify-content: space-around;(每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍)*/
/*交叉轴*/
    /*align-items: flex-start;（交叉轴的起点对齐。）*/
    /*align-items: flex-end;(交叉轴的终点对其)*/
    /*align-items: center;交叉轴的中点对齐*/
    /*align-items: baseline;项目的第一行文字的基本对其*/
    /*align-items: stretch;默认值*/
}
/*排序*/
/*.item-1{*/
    /*order: 1;*/
/*}*/
/*.item-4{*/
    /*order: 3;*/
/*}*/
/*.item-3{*/
    /*order: 2;*/
/*}*/
.item span{
    font-size: 50px;
}
.container{
    display: flex;
    flex-wrap: wrap;
}
.item{
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 25%;
}